<template>
  <div class="area-container">
    <!-- 添加区域 -->
    <div class="add-area">
      <el-button type="primary" size="medium" @click="handleAdd">添加区域</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <div class="table">
      <el-table
        style="width: 100%"
        :data="areaList"
      >
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
        />
        <el-table-column
          label="区域名称"
          width="180"
          prop="areaName"
        />
        <el-table-column
          label="车位数(个)"
          prop="spaceNumber"
        />
        <el-table-column
          label="面积(m²)"
          width="120"
          prop="areaProportion"
        />
        <el-table-column
          label="计费规则"
          width="120"
          prop="ruleId"
          :formatter="formatRule"
        />
        <el-table-column
          label="备注"
          prop="remark"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template #default="scope">
            <el-button
              size="medium"
              type="text"
              @click="handleEdit(scope.row)"
            >编辑</el-button>

            <el-button
              size="medium"
              type="text"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>

          </template>

        </el-table-column>

      </el-table>
      <!-- 弹框 -->
      <el-dialog :title="addForm.id ? '编辑区域' : '添加区域'" :visible.sync="dialogFormVisible">
        <el-form :model="addForm" :rules="addFormRules" ref="form">
          <el-form-item label="区域名称" :label-width="formLabelWidth" prop="areaName">
            <el-input v-model="addForm.areaName" autocomplete="off" placeholder="请输入区域名称"></el-input>
          </el-form-item>
          <el-form-item label="车位数(个)" :label-width="formLabelWidth" prop="spaceNumber">
            <el-input v-model="addForm.spaceNumber" autocomplete="off" placeholder="请输入车位个数"></el-input>
          </el-form-item>
          <el-form-item label="面积(m²)" :label-width="formLabelWidth" prop="areaProportion">
            <el-input v-model="addForm.areaProportion" autocomplete="off" placeholder="请输入面积">
              <template slot="append">m²</template>
            </el-input>
          </el-form-item>
          <el-form-item label="关联计费规则" :label-width="formLabelWidth" prop="ruleId">
            <el-select v-model="addForm.ruleId" placeholder="请选择">
              <el-option 
              v-for="item in ruleOptions" 
              :key="item.value"
              :label="item.label" 
              :value="item.value"></el-option>
              <!-- <el-option label="按次收费" value="2"></el-option>
              <el-option label="按小时计费" value="3"></el-option>
              <el-option label="按分钟收费" value="4"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="addForm.remark" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="page-container">
        <!-- @current-change切换页码用的 -->
          <el-pagination
            layout="total, prev, pager, next"
            :total="total"
            :page-size="params.pageSize"
            @current-change="handleCurrentChange"
          />
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { getAreaListAPI, addAreaAPI, editAreaAPI, deleteAreaAPI } from '@/api/area'

export default ({
  name: 'Area',
  data() {
    return {
      areaList: [],  //table列表
      total: 0,
      dialogFormVisible: false,
      formLabelWidth: '120px',  //弹框输入框宽度
      params: {
        page: 1,
        pageSize: 5
      },
      addForm: {
        areaName: '', //区域名称
        spaceNumber: '',  //车位数
        areaProportion: '',  //面积
        ruleId: '',  //关联计费规则ID
        remark: ''  //备注
      },
      addFormRules: {
        areaName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
        spaceNumber: [{ required: true, message: '请输入车位个数', trigger: 'blur' }],
        areaProportion: [{ required: true, message: '请输入面积', trigger: 'blur' }],
        ruleId: [{ required: true, message: '请选择关联计费规则', trigger: 'blur' }],
      },
      ruleOptions: [
        { label: '分段计费', value: 1 },
        { label: '按次收费', value: 2 },
        { label: '按小时计费', value: 3 },
        { label: '按分钟计费', value: 4 }
      ]
    }
  },
  created() {
    this.getAreaList()
  },
  methods: {
    //删除
    handleDelete(id) {
      this.$confirm('确定要删除当前用户吗？', '温馨提示').then(async() => {
        await deleteAreaAPI(id)
        this.$message.success('删除成功')
        this.getAreaList()
      }).catch(() => {})
    },
    //实现根据ruleId找到对应计费规则
    formatRule(row, column, cellValue) {
      //console.log(cellValue)
      //如果接口返回的值是2、3、4这样并且跟ruleOptions中的value值相等，返回那一行的数据，比如cellValue获取到
      //接口数据是3，而在ruleOptions中遍历到{ label: '按小时计费', value: 3 }中value是3，那么把这一行{ label: '按小时计费', value: 3 }
      //返回给rule，然后rule为真则返回rule.label就是返回按小时计费，为假返回空，实现数据转换
      const rule = this.ruleOptions.find(item => item.value === cellValue)
      //console.log(rule)
      return rule ? rule.label : ''
    },
    //编辑
    handleEdit(row) {
      this.dialogFormVisible = true
      const { id, areaName, spaceNumber, areaProportion, ruleId, remark} = row
      this.addForm = { id, areaName, spaceNumber, areaProportion, ruleId, remark}
    },    
    //确定按钮
    confirmAdd() {
      this.$refs.form.validate(async(flag) => {
        if (!flag) return 
        if (this.addForm.id) {
          await editAreaAPI(this.addForm)
          this.$message.success('编辑区域成功')
        } else {
          await addAreaAPI(this.addForm)
          this.$message.success('添加区域成功')
        }
        // console.log(res)
        this.getAreaList()
        this.closeDialog()
      })
    },
    //关闭弹框
    closeDialog() {
      this.dialogFormVisible = false
      this.$refs.form.resetFields()
      this.addForm.remark = ''
    },
    //添加区域
    handleAdd() {
      this.dialogFormVisible = true
      this.addForm = {
        areaName: '', //区域名称
        spaceNumber: '',  //车位数
        areaProportion: '',  //面积
        ruleId: '',  //关联计费规则ID
        remark: ''
      }
    },
    //计算序号
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    //分页事件
    handleCurrentChange(page) {
      console.log(page)
      this.params.page = page
      this.getAreaList()
    },
    //获取面积列表
    async getAreaList() {
      const res = await getAreaListAPI(this.params)
      //console.log(res)
      this.areaList = res.data.rows
      this.total = res.data.total
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container{
    padding:4px 0px;
    text-align: right;
}
</style>
